<template>
  <div class="epic-component-view flex flex-col">
    <!-- 搜素框 start -->
    <div class="search-box px-10px py-6px">
      <Input placeholder="搜索组件" v-model="keyword" clearable allowClear v-model:value="keyword">
        <template #prefix>
          <EIcon name="icon-chaxun" />
        </template>
      </Input>
    </div>
    <!-- 搜素框 end -->
    <div class="flex flex-1 overflow-auto">
      <!-- 分类选项 start  -->
      <div class="tabs-box">
        <div
          class="tab cursor-pointer truncate"
          :class="{ checked: activeItem.title === item.title }"
          v-for="(item, index) in getSchemaTypeList"
          :key="index"
          :title="item.title"
          @click="handelChecked(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 分类选项 end  -->

      <div class="h-full flex-1 overflow-auto py-2 box-border">
        <draggable
          v-model="getSourceSchemaList"
          v-bind="{
            group: { name: 'edit-draggable', pull: 'clone', put: false },
            sort: false,
            animation: 180,
            ghostClass: 'moving',
          }"
          :clone="generateNewSchema"
          item-key="id"
          class="grid grid-cols-[auto] px-10px gap-2"
        >
          <!-- auto_auto -->
          <template #item="{ element }">
            <div
              class="source-componet-item flex items-center truncate"
              @click="handleClick(element)"
            >
              <EIcon prefix="" :name="element.icon" />
              <div>{{ element.label }}</div>
            </div>
          </template>
        </draggable>
        <div v-show="!getSourceSchemaList.length" class="text-center pt-42px text-gray-400">
          没有查询到的组件
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import draggable from 'vuedraggable';
  import { ref, computed, inject } from 'vue';
  import {
    generateNewSchema,
    findSchemaInfoById,
    pluginManager,
    revoke,
  } from '/@/views/formDesigner/utils';
  import { NodeItem, PageSchema, Designer } from '../../../../../types/epic-designer';
  import EIcon from '../../../../icon';
  const Input = pluginManager.getComponent('input');
  const pageSchema = inject('pageSchema') as PageSchema;
  const designer = inject('designer') as Designer;
  const sourceSchema = pluginManager.getSchemaByGroup();
  const keyword = ref('');
  const allSchema = {
    title: '全部',
    list: [],
  };
  const activeItem = ref(allSchema);

  /**
   * 计算组件分类列表
   */
  const getSchemaTypeList = computed(() => {
    return [allSchema, ...sourceSchema.value];
  });

  /**
   * 计算当前需要展示的组件列表
   */
  const getSourceSchemaList = computed(() => {
    let sourceSchemaList: NodeItem[] = activeItem.value.list;
    if (activeItem.value.title === '全部') {
      const sourceSchemaAllList = sourceSchema.value.map((item) => {
        return item.list;
      });
      sourceSchemaList = ([] as NodeItem[]).concat(...sourceSchemaAllList);
    }

    if (keyword.value) {
      return sourceSchemaList.filter(
        (item) =>
          item.label?.includes(keyword.value) ||
          item.label?.includes(keyword.value.toUpperCase()) ||
          item.label?.includes(keyword.value.toLowerCase()),
      );
    }

    return sourceSchemaList;
  });

  function handelChecked(item) {
    activeItem.value = item;
  }

  /**
   * 点击添加节点
   * @param e
   */
  function handleClick(schema: NodeItem) {
    const data = findSchemaInfoById(pageSchema.schemas, designer.state.checkedNode?.id ?? 'root');
    if (!data) {
      return false;
    }
    let { list, schema: checkedSchema, index } = data;

    // 如果选中元素存在children字段，则添加到children中
    if (checkedSchema.children && !checkedSchema.childImmovable) {
      list = checkedSchema.children;
      index = checkedSchema.children.length - 1;
    }

    const newSchema = generateNewSchema(schema);

    list.splice(index + 1, 0, newSchema);
    designer.setCheckedNode(newSchema);
    revoke.push(pageSchema.schemas, '插入组件');
  }
</script>
